<template>
    <div>
      <div class="page-title">
          <span>教学资源</span>
          <!-- <el-button type="primary" plain icon="Plus" @click="handleAdd" style="float: right;">新增</el-button> -->
      </div>
      <div class="article-list-container">
        <!-- 京剧展示列表 -->
        <div class="index-row">
          <!-- 资讯列表 -->
          <el-card class="article-item"
            v-for="article in articles"
            :key="article.id"
            @click="toDetailPage(article.courseId)"
          >
            <!-- <h1 class="list-title">景点推荐</h1> -->
                <!-- 缩略图 -->
              <el-image
                :src="article.mainPic"
                class="article-thumbnail"
                fit="cover"
              ></el-image>
              <!-- 标题和发布时间 -->
              <div class="article-info">
                <div class="article-title">
                  {{ article.title }}
                </div>
                <div class="atl-tag">
                  <el-tag type="danger">{{article.tags}}</el-tag>
                </div>
                <div class="article-meta">
                  <span class="publish-date">发布时间： {{ timestampToDayHM(article.updatedAt) }}</span>
                </div>
              </div>
              <div class="atl-like">
                <span>{{article.likes}} 赞</span>
                <span>{{article.favs}} 收藏</span>
              </div>
          </el-card>
        </div>
        <!-- 分页组件 -->
        <el-pagination background layout="prev, pager, next" v-model:page-size="queryForm.pageSize" v-model:current-page="queryForm.pageNo" :total="total" @current-change="getInfo" />
      </div>
    </div>
  </template>
  
<script setup lang="ts">
  import { ref, reactive, nextTick, toRef } from "vue";
  import baseService from "@/service/baseService";
  import { ElMessage, ElMessageBox } from "element-plus";
  import { timestampToDayHM, timestampToHM, timestampToDate, formatAmount } from "@/utils/utils"
  import { fileUploader } from '@/utils/upload.js'
  import { useRouter, useRoute } from 'vue-router';
  import type { TabsPaneContext } from 'element-plus'
  
  const activeName = ref('zero')
  const router = useRouter();
  const route = useRoute();
  // 查询参数
  const queryForm = reactive({
    deptName: "",
    pageNo: 1,
    tag: '',
    pageSize: 10
  });
  // 列表内容数量
  const total = ref(0);
  // 列表是否加载
  const loading = ref(true);

  // 资讯数据
  const articles = ref<any>([]);

  // 表单实例
  const formRef = ref();
  // 是否打开弹出框
  const open = ref(false);
  const openDetail = ref(false);

  // 跳转到资讯详情页面
  const toDetailPage = (pid: number)=>{
    router.push("/course/detail?nid="+pid);
  }

  // 表单验证
  const rules = ref({
    deptName: [{ required: true, message: "规则名称不能为空", trigger: "blur" }],
  });

  const getInfo = () => {
    const cid = route.query.cid
    console.log('从路由获取参数：', route.query)
    let req = {category: cid}
    baseService.post(`/api/course/list`, queryForm).then((res) => {
      console.log('获取列表：',res)
      articles.value = res.data.records;
      total.value = res.data.totalrecord;
      loading.value = false;
    }).catch(() => {
        loading.value = false;
    });
  }

  getInfo()

</script>
  
  <style scoped>
  .page-title {
    font-size: 16px;
    font-weight: bold;
    color: #0038a7;
    padding-left: 5px;
    border-left: 3px solid #0038a7;
    margin: 15px auto 0 auto;
    height: 30px;
    line-height: 30px;
    width: 920px;
}
  .article-list-container {
    max-width: 920px;
    margin: 0 auto;
    padding: 20px;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
  }
  
  .article-list-card {
    color: #555;
    margin-bottom: 20px;
    width: 450px;
  }
  
  .list-title {
    font-size: 24px;
    font-weight: normal;
    margin: 0 0 20px 0;
    text-align: center;
    color: #0f95b0;
  }

  .index-row {
    margin-bottom: 10px;
    margin-top: 15px;
    padding-bottom: 10px;
    border-bottom: #ccc 1px solid;
    clear: both;
    width: 1020px;
    margin: 15px auto;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
  }
  .article-item {
    color: #555;
    margin-bottom: 30px;
    width: 48%;
    height: 180px;
    box-sizing: border-box;
  }
  
  .article-item:hover {
    background-color: #f5f5f5;
    cursor: pointer;
  }

  .article-item:hover .article-title{
    color: #c35556;
  }
  
  .article-thumbnail {
    width: 140px;
    height: 100px;
    border-radius: 4px;
    float: left;
    margin-right: 10px;
  }
  
  .article-info {
    flex: 1;
    height: 120px;
  }
  
  .article-title {
    font-size: 18px;
    margin: 0 0 10px 0;
    color: #666;
    font-weight: normal;
  }
  
  .article-meta {
    font-size: 14px;
    color: #666;
  }
  
  .publish-date {
    font-style: italic;
  }
  .atl-tag, .atl-like{
    margin: 5px 0;
  }
  .atl-like{
    font-size: 13px;
  }
  .atl-like span{
    padding: 0 10px;
  }
.tab-list{
  width: 100%;
}
  </style>